<template>
  <!-- 责任人区域（根据检查区域id查询） -->
  <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" :optionFilterProp="optionFilterProp" v-model="currentValue" allowClear>
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option :title="i.subContractor[replaceFilds.name]" v-for="i in list" :key="i[replaceFilds.id]" :value="i[replaceFilds.id]">{{ i.subContractor ? i.subContractor[replaceFilds.name] : '' }}</a-select-option>
  </a-select>
</template>
<script>
import api from '@/api/quality/base/otherWebContent'

export default {
  name: 'SelectDutyArea',
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object]
    },
    form: {
      type: Object,
      default: () => ({})
    },
    // 需要联动的表单名
    keyValue: {
      type: String,
      default: () => 'respAreaId'
    },
    // 联动表单值改变时是否清空当前表单值
    isClear: {
      type: Boolean,
      default: () => true
    },
    //如果是编辑，第一次不要重置绑定的值。。。。
    isEdit: {
      type: Boolean,
      default: () => false
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    },
    // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索,否则为value
    optionFilterProp: {
      type: String,
      default: () => 'children'
    },
    // 替换字段
    replaceFilds: {
      type: Object,
      default: () => ({
        id: 'subContractorId',
        name: 'name'
      })
    }
  },
  data() {
    return {
      fetching: false, // 加载条
      list: [] // 列表
    }
  },
  watch: {
    // 监听联动表单重置列表
    attr(e) {
      // 清空表单1
      if (this.isClear && !this.isEdit) {
        this.currentValue = void 0
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      }
      // 清空表单
      if (this.isEdit && this.isCanClear) {
        this.currentValue = void 0
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      } else {
        this.isCanClear = true
      }
      // 重置列表
      this.list = []
      e && this.getList()
    },
    // 监听表单
    currentValue(e) {
      console.log(e)
      if (e && this.all?.length) {
        let row = this.all.find((i) => i[this.replaceFilds.id] === e)
        this.$emit('selectChange', row)
      }
    },

  },
  methods: {
    /**
     * @description: 请求责任区域
     */
    getList() {
      this.fetching = true
      api
        .getSubContractor(this.attr)
        .then((res) => {
          if (res.data?.length) {
            this.list = res.data.map((i) => {
              i.subContractor.subContractorId = i.subContractorId
              return i
            })
            this.all = res.data
            this.$emit('update:list', this.list)
            if (this.currentValue) {
              let row = this.all?.find((i) => i[this.replaceFilds.id] === this.currentValue)
              console.log(this.all,this.currentValue)
              this.$emit('selectChange', row)
            }
          }
        })
        .finally(() => {
          this.fetching = false
        })
    }
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    // 联动表单
    attr() {
      return this.form[this.keyValue]
    }
  }
}
</script>
